<template>
  <div class="bottom_left nav" :class="!sidebar ? 'nav-w' : 'nav-wl'">
    <el-menu
        default-active="2"
        class="el-menu-vertical-demo myleft"
        background-color="#0f2339"
        text-color="#fff"
        active-text-color="rgb(105,179,255)"
        :router="true"
        :collapse="sidebar">

      <el-submenu v-for="item in routes" :key="item.path" :index="item.path" v-show="item.meta.type == type || type=='1'">
        <template slot="title">
          <i class="iconfont" :class="item.meta.icon"></i>
          <span>{{ item.meta.title }}</span>
        </template>
        <el-menu-item
            v-for="i in item.children"
            :index="item.path + '/' +i.path"
            :key="item.path + '/' +i.path">{{ i.meta.title }}</el-menu-item>
      </el-submenu>

<!--      <el-submenu index="1">
        <template slot="title">
          <i class="iconfont icon-panel"></i>
          <span>首页</span>
        </template>
        <el-menu-item index="/home/dashboard">仪表盘</el-menu-item>
        <el-menu-item index="/home/data">设备数据</el-menu-item>
      </el-submenu>

      <el-submenu index="2">
        <template slot="title">
          <i class="iconfont icon-luyouqi"></i>
          <span>设备</span>
        </template>
        <el-menu-item index="/device/gateway">网关</el-menu-item>
        <el-menu-item index="/device/deviceGroup">设备群组</el-menu-item>
        <el-menu-item index="/device/sensorList">传感器列表</el-menu-item>
      </el-submenu>

      <el-submenu index="3">
        <template slot="title">
          <i class="iconfont icon-fyxx"></i>
          <span>计费</span>
        </template>
        <el-menu-item index="/">账户信息</el-menu-item>
        <el-menu-item index="/">充值记录</el-menu-item>
        <el-menu-item index="/">使用记录</el-menu-item>
      </el-submenu>

      <el-submenu index="4">
        <template slot="title">
          <i class="iconfont icon-signal"></i>
          <span>测量类型</span>
        </template>
        <el-menu-item index="/">添加测量类型</el-menu-item>
        <el-menu-item index="/">测量类型列表</el-menu-item>
      </el-submenu>

      <el-submenu index="5">
        <template slot="title">
          <i class="iconfont icon-anquan"></i>
          <span>安全</span>
        </template>
        <el-menu-item index="/">添加密钥</el-menu-item>
        <el-menu-item index="/">密钥列表</el-menu-item>
      </el-submenu>

      <el-submenu index="6">
        <template slot="title">
          <i class="iconfont icon-account"></i>
          <span>账号</span>
        </template>
        <el-menu-item index="/account/addAccount">添加账号</el-menu-item>
        <el-menu-item index="/account/accountList">账号列表</el-menu-item>
      </el-submenu>-->
    </el-menu>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "Sidebar",
  data(){
    return {
      routes: [],
    }
  },
  computed:{
    ...mapGetters(["sidebar","type"]),
  },
  created() {
    console.log(this.$router);
    //获取路由数据，重组，保存到 本地变量
    let routes = [];
    this.$router.options.routes.forEach(el=>{
      if (el.meta){
        routes.push(el);
      }
    })
    this.routes = routes;

  }
}
</script>

<style scoped>
.el-menu {
  border-right: none;
}
.iconfont {
  font-size: 18px;
  padding-right: 5px;
}
.nav-w {
  width: 167px;
}
.nav-wl {
  width: 64px;
}
.bottom_left{
  background: #0f2339;
  color: white;
  overflow: hidden;
}
</style>